<!-- 合作伙伴 -->
<template>
  <div class="brand">
    <div class="wCen">
      <div class="homeTitle">
        <span class="homeTitle_l">{{ $t("partner-t1") }}</span>
        <span class="homeTitle_r" v-if="localeCn">PARTNERS</span>
      </div>
      <div class="homeMore" @click="go2Partner">
        <span class="homeMore_r"></span>
      </div>
    </div>
    <div class="exhibitors">
      <div class="exhibitorsTabPanel">
        <div class="wCen">
          <div class="exhibitorsBar">
            <div class="box" :class="localeCn ? 'cn' : 'en'">
              <ul class="tabs" v-if="labels && labels.length > 0">
                <li class="tab" :class="{ hit: currentType == item.value }" v-for="(item, idx) in labels" :key="idx" @click="handleChangeTab(item)">
                  {{ localeCn ? item.label : item.labelEn }}
                </li>
              </ul>
            </div>
          </div>
       
        <ol class="exhibitorsPanes">
          <li class="pane">
            <div class="swiper-container exhibitorsSwiper swiper-no-swiping" v-if="currentList && currentList.length > 0">
              <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item, idxJ) in currentList" :key="idxJ">
                  <div class="imgBox">
                    <img :src="item.imageUrl" :alt="item.title" width="100%" />
                  </div>
                </div>
              </div>
              <div class="swiper-pagination"></div>
              <div class="swiper-button-next"></div>
              <div class="swiper-button-prev"></div>
            </div>
          </li>
        </ol>
		 </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getList } from "@/api/partner";
import util from "@/libs/util";
export default {
  props: {},
  dicts: ["partner_type"],
  data() {
    return {
      currentType: "2",
      list: [],
      form: {
        type: "",
      },
      loading: true,
      listObj: {},
      currentList: [],
      mySwiper: null,
    };
  },
  computed: {
    // 各类标签数组
    labels() {
      let labelCns = this.dict.type.partner_type;
      let labelEns = util.setDictRaw2Up(this.dict.type.partner_type);
      return this.localeCn ? labelCns : labelEns;
    },
    slidesPerView() {
      if (this.isMobile) {
        return 3;
      } else {
        return 4;
      }
    },
    slidesPerColumn() {
      if (this.isMobile) {
        return 4;
      } else {
        return 2;
      }
    },
  },
  mounted() {
    this.getListFun();
  },
  methods: {
    handleChangeTab(item) {
      this.currentType = item.value;
      this.currentList = this.listObj[this.currentType];
      this.initSwiper();
    },
    getListFun() {
      this.loading = true;
      this.invoke(getList, this.form).then((res) => {
        if (res && res.code == 200) {
          if (res.rows) {
            this.list = res.rows.map((item) => {
              return {
                imageUrl: item.imageUrl,
                type: item.type,
              };
            });
            // const item=this.list[0]
            // this.list.push({
            //   imageUrl: item.imageUrl,
            //   type: item.type,
            // })
            // this.list.push({
            //   imageUrl: item.imageUrl,
            //   type: item.type,
            // })
            if (this.list && this.list.length > 0) {
              this.labels &&
                this.labels.length > 0 &&
                this.labels.forEach((ele) => {
                  let v = ele.value;
                  this.listObj[v] = this.list.filter((item) => {
                    return item.type == v;
                  });
                });
              this.currentList = this.listObj[this.currentType];
              this.initSwiper();
            }
          }
          this.loading = false;
        }
      });
    },
    initSwiper() {
      this.$nextTick(() => {
        if (this.mySwiper && this.mySwiper.destroy) {
          //销毁swiper
          this.mySwiper.destroy(true, true);
        }
        this.mySwiper = new Swiper(".exhibitorsSwiper", {
          spaceBetween: 0,
          paginationClickable: true,
          nextButton: ".exhibitorsSwiper .swiper-button-next",
          prevButton: ".exhibitorsSwiper .swiper-button-prev",
          pagination: ".exhibitorsSwiper .swiper-pagination",
          slidesPerView: this.slidesPerView,
          slidesPerColumn: this.slidesPerColumn,
          slidesPerGroup: this.slidesPerView,
          slidesPerColumnFill: "row",
          loopFillGroupWithBlank: true,
          autoplayDisableOnInteraction: false, //手动播放后继续自动播放
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.brand {
  background-color: #fff;
  .wCen {
    &.plr60 {
      padding: 0 60px;
    }
  }
  .homeTitle {
    margin-bottom: 60px;
  }
  .homeMore {
    margin-bottom: 55px;
  }
  .exhibitors {
    // 选项卡
    .exhibitorsTabPanel {
      margin-bottom: 100px;
      .exhibitorsBar {
        background: none;
        height: auto;
        .box {
          background: #f5f5f7;
          border-top-left-radius: 12px;
          border-top-right-radius: 12px;
          padding-left: 50px;
          overflow-x: auto;
          overflow-y: hidden;
          padding: 28px 63px 24px;
          .tabs {
            white-space: nowrap;
            overflow: unset;
            display: flex;
            .tab {
              float: none;
              font-size: 24px;
              line-height: 1;
              font-weight: normal;
              text-align: center;
              color: #000;
              position: relative;
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
              user-select: none;
              width: auto;
              margin-right: 110px;
              cursor: pointer;
              &::after {
                content: "";
                display: block;
                border-bottom: 4px solid transparent;
                width: 100%;
                position: relative;
                bottom: -20px;
              }
              &.hit {
                color: #e35191;
                &::after {
                  display: block;
                  border-bottom: 4px solid #e35191;
                }
              }
            }
          }
        }
      }
    }
    // 具体内容
    .exhibitorsPanes {
      width: 1400px;
      margin: 60px auto 0;
      position: relative;
      padding: 0;
      .pane {
        display: block;
        padding-bottom: 80px;
      }
      .swiper-container {
        position: static;
        .swiper-slide {
          overflow: hidden;
          border: none;
          margin-bottom: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          .imgBox {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 245px;
            height: 80px;
            padding: 10px;
            box-sizing: content-box;
			  border:1px solid #f1f1f1;
            img {
              padding: 30px;
            }
          }
        }
      }
      .swiper-button-prev,
      .swiper-button-next {
        margin-top: -52px;
      }
    }
    .swiper-button-next.swiper-button-disabled,
    .swiper-button-prev.swiper-button-disabled {
      opacity: 0.2;
    }
    .swiper-button-next,
    .swiper-container-rtl .swiper-button-prev,
    .swiper-button-prev,
    .swiper-container-ltr .swiper-button-next {
      background-image: url("@/assets/images/arrow_r_black.svg");
      width: 80px;
      height: 80px;
      border-radius: 80px;
      background-color: #f5f5f7;
      background-size: 18px;
    }
    .swiper-button-next,
    .swiper-container-rtl .swiper-button-prev {
      right: -70px;
    }

    .swiper-button-prev,
    .swiper-container-ltr .swiper-button-next {
      transform: rotate(180deg);
      left: -70px;
    }
    .swiper-pagination {
      // bottom:-74px;
      :deep(.swiper-pagination-bullet) {
        width: 24px;
        height: 6px;
        border-radius: 6px;
        background: #dedede;
        margin: 0 6px;
        &.swiper-pagination-bullet-active {
          opacity: 1;
          background: #c3392c;
        }
      }
    }
  }
  // @media (min-width: 1250px) and (max-width: 1600px) {
  //   padding: scale(100px) 0 ;
  //   .homeTitle {
  //     margin-bottom: 40px;
  //   }

  //   .exhibitors {
  //     .exhibitorsTabPanel {
  //       .exhibitorsBar {
  //         .box {
  //           padding-left: 40px;
  //           border-radius: 18px;
  //           height: auto;
  //           .tabs {
  //             .tab {
  //               font-size: 18px;
  //             }
  //           }
  //         }
  //       }
  //       .exhibitorsPanes {
  //         padding: 0 65px;
  //         .pane {
  //           padding-bottom: 65px;
  //         }
  //       }
  //     }
  //     .exhibitorsPanes {
  //       padding: 0 65px;
  //       .swiper-button-next,
  //       .swiper-container-rtl .swiper-button-prev,
  //       .swiper-button-prev,
  //       .swiper-container-ltr .swiper-button-next {
  //         width: 56px;
  //         height: 56px;
  //         border-radius: 56px;
  //         background-color: #f5f5f7;
  //         background-size: 12px;
  //       }
  //     }
  //   }
  // }
  @media (min-width: 1450px) and (max-width: 1750px) {
	  padding: scale(100px) 0 ;
    .exhibitors {
      .exhibitorsTabPanel {
        margin-bottom: 50px;
        .exhibitorsBar .box .tabs .tab{
          margin-right: 80px;
		  font-size: 18px;
        }
		
      }
      .exhibitorsPanes {
        width: 100%;
        .swiper-container {
          width: 90%;
        }
      }
      .swiper-button-next,
      .swiper-container-rtl .swiper-button-prev {
        right: 0px;
		width: 40px;
		height: 40px;
		background-size: 10px;
      }
      .swiper-button-prev,
      .swiper-container-rtl .swiper-button-next {
        left: 0px;
		width: 40px;
		height: 40px;
		background-size: 10px;
      }
    }
  }
  @media (min-width: 1281px) and (max-width: 1440px) {
	  padding: scale(100px) 0 ;
    .exhibitors {
      .exhibitorsTabPanel {
        margin-bottom: 30px;
        .exhibitorsBar .box .tabs .tab{
          margin-right: 60px;
		  font-size: 16px;
        }
      }
      .exhibitorsPanes {
        width: 100%;
        .swiper-container {
          width: 90%;
		  .imgBox{
			width: 210px!important;
			height: 70px!important;
		  }
        }
      }
      .swiper-button-next,
      .swiper-container-rtl .swiper-button-prev {
        right: 0px;
        width: 40px;
        height: 40px;
        background-size: 10px;
      }
      .swiper-button-prev,
      .swiper-container-rtl .swiper-button-next {
        left: 0px;
        width: 40px;
        height: 40px;
        background-size: 10px;
      }
    }
  }
  @media (min-width: 768px) and (max-width: 1280px) {
	  padding: scale(100px) 0 ;
    .exhibitors {
      .exhibitorsTabPanel {
        margin-bottom: 0px;
		.exhibitorsBar .box {
			padding:20px 40px
		}
        .exhibitorsBar .box .tabs .tab{
          margin-right: 80px;
		  font-size: 14px;
        }
      }
      .exhibitorsPanes {
		  margin-top: 40px;
        width: 100%;
        .swiper-container {
          width: 90%;
      		  .imgBox{
      			width: 180px!important;
      			height: 60px!important;
      		  }
        }
      }
     .swiper-button-next,
     .swiper-container-rtl .swiper-button-prev {
       right: 0px;
     		width: 40px;
     		height: 40px;
     		background-size: 10px;
     }
     .swiper-button-prev,
     .swiper-container-rtl .swiper-button-next {
       left: 0px;
     		width: 40px;
     		height: 40px;
     		background-size: 10px;
     }
    }
  }
  @media (max-width: 767px) {
    padding: 40px 0;
    .wCen {
      &.plr60 {
        padding: 0 30px;
      }
    }
    .homeTitle {
      margin-top: 10px;
      margin-bottom: 20px;
    }
    .homeMore{
      margin-bottom: 30px;
    }
    .exhibitors {
      .exhibitorsTabPanel {
        margin-bottom: 0px;
        .exhibitorsBar {
          .box {
            border-radius: 10px;
            height: auto;
            padding:10px 14px 14px 20px;
            .tabs {
              .tab {
                font-size: 1px;
                margin-right: 20px;
                height: auto;
                padding: 6px 0;
                &::after {
                  border-bottom-width: 4px;
                  margin-top: -6px;
                }
              }
            }
          }
        }
        .exhibitorsPanes {
          padding: 0 15px;
          margin:20px auto 0;
          width: 100%;
          .pane {
            padding-bottom: 40px;
          }
          .swiper-container {
            .swiper-slide {
              margin-bottom: 0;
              .imgBox {
				width: 180px!important;
				height: 40px!important;
                img{
                  padding: 0;
                }
              }
            }
          }
        }
      }
      .swiper-button-next,
      .swiper-container-rtl .swiper-button-prev,
      .swiper-button-prev,
      .swiper-container-ltr .swiper-button-next {
        // width: 40px;
        // height: 40px;
        // border-radius: 80px;
        // background-size: 14px;
        // background-size: 20px 16px;
        display: none;
      }
      $gutter: -10px;
      .swiper-button-next,
      .swiper-container-rtl .swiper-button-prev {
        right: $gutter;
      }

      .swiper-button-prev,
      .swiper-container-ltr .swiper-button-next {
        left: $gutter;
      }
    }
  }
}
</style>
